<template>
	<div class="nex-sign-illustration">
		<div class="illustration-container">
			<NexLottie
				ref="lottieRef"
				:path="illustrationPath"
				:loop="true"
				:autoplay="true"
				:speed="0.5" />
		</div>
		<div class="decoration-circles">
			<div class="circle circle-1" />
			<div class="circle circle-2" />
			<div class="circle circle-3" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { computed } from "vue";

defineOptions({
	name: "NexSignIllustration",
});

const props = defineProps<{
	type?: "login" | "register" | "forgot-password";
}>();

const illustrationPath = computed(() => {
	switch (props.type) {
		case "register":
			return "/animations/register.json";
		case "forgot-password":
			return "/animations/forgot-password.json";
		default:
			return "/animations/login.json";
	}
});
</script>

<style lang="scss" scoped>
.nex-sign-illustration {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;

	.illustration-container {
		position: relative;
		width: 100%;
		height: 200px;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 2;

		:deep(svg) {
			width: auto !important;
			height: 180px !important;
		}
	}

	.decoration-circles {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		pointer-events: none;

		.circle {
			position: absolute;
			border-radius: 50%;
			opacity: 0.1;
			background: linear-gradient(
				135deg,
				var(--el-color-primary) 0%,
				var(--el-color-primary-light-3) 100%
			);

			&-1 {
				width: 300px;
				height: 300px;
				top: -100px;
				left: -100px;
				animation: float 8s ease-in-out infinite;
			}

			&-2 {
				width: 200px;
				height: 200px;
				bottom: -50px;
				right: -50px;
				animation: float 6s ease-in-out infinite;
				animation-delay: -2s;
			}

			&-3 {
				width: 150px;
				height: 150px;
				bottom: 100px;
				left: 50px;
				animation: float 7s ease-in-out infinite;
				animation-delay: -4s;
			}
		}
	}
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(-20px) scale(1.05);
	}
}
</style>
